<template>
  <div id="snowMask"></div>
</template>

<script>
export default {
  name: "Snow"
}
</script>

<style scoped>
@keyframes snow{
  0% {
    background-position: 0 0, 0 0,0 50%;
  }
  100% {
    background-position: 500px 500px, 1000px 500px,100% 100%;
  }
}

#snowMask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url('../../assets/images/snow1.png'),url('../../assets/images/snow2.png'),url('../../assets/images/snow1.png');
  animation: 10s snow linear infinite;
  pointer-events: none;
}
</style>